import React, { useState, useEffect } from "react";
import { UserCircleO, Arrow } from "@react-vant/icons";
import { useNavigate } from "react-router-dom";
import { Cell, Dialog } from "react-vant";
type Props = {};

const My = (props: Props) => {
  const navigate = useNavigate();
  const [title, setTitle] = useState("");
  const [flog, setFlog] = useState(true);
  useEffect(() => {
    let username: any = localStorage.getItem("username");
    let token = localStorage.getItem("token");
    if (token) {
      setFlog(false);
      setTitle(username);
    }
  }, []);
  const qiehuan = () => {
    navigate("/login");
  };
  const dl = () => {
    navigate("/login2");
  };
  //乘客列表
  const cklb = () => {
    let token = localStorage.getItem("token");
    if (!token) {
      Dialog.confirm({
        title: "标题",
        message: "未登录 ,  请先进行登录",
      })
        .then(() => {
          console.log("confirm");
          navigate('/login2')
        })
        .catch(() => {
          console.log("catch");
        });
    } else {
      navigate("/passenger");
    
    }
  };
  return (
    <div className="mys">
      <div className="mys_bag">
        {flog ? (
          <dl className="dl1" onClick={qiehuan}>
            <dt>
              <UserCircleO />
            </dt>
            <dd style={{ fontSize: "12px" }} >
              登录/注册
            </dd>
          </dl>
        ) : (
          <dl className="dl2" onClick={qiehuan}>
            <dt>
              <UserCircleO />
            </dt>
            <dd>{title}</dd>
            <dd style={{ fontSize: "12px" }}>
              切换账号》》
            </dd>
          </dl>
        )}

        <div className="mys_tie">
          <div className="mys_tie_1">
            <div onClick={cklb}>
              <span>
                <img src={require("../../img/1.png")} alt="" /> 常用联系人
              </span>
              <span>
                <Arrow />
              </span>
            </div>
            <div onClick={()=>navigate('/home/cfig')}>
              <span>
                <img src={require("../../img/2.png")} alt="" />
                我的订单
              </span>
              <span>
                <Arrow />
              </span>
            </div>
            <div onClick={()=>navigate('/home/cart')}>
              <span>
                <img src={require("../../img/3.png")} alt="" />
                客服中心
              </span>
              <span>
                <Arrow />
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default My;
